<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日常小工具集合</title>
    <link rel="stylesheet" href="css/styles.css?v=" + new Date().getTime()>
    <link rel="stylesheet" href="css/json-tool.css?v=" + new Date().getTime()>
</head>
<body>
    <div class="app-container">
        <!-- 左侧导航 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="header-with-toggle">
                    <div>
                        <h1>工具集合</h1>
                        <p>日常实用工具</p>
                    </div>
                    <button id="theme-toggle" class="theme-toggle" title="切换暗黑模式">
                        <span class="theme-icon light">☀️</span>
                        <span class="theme-icon dark">🌙</span>
                    </button>
                </div>
            </div>
            <ul class="nav-menu">
                <li class="nav-item active">
                    <a href="#" class="nav-link" data-tool="qrcode">
                        <span class="nav-icon">📱</span>
                        <span class="nav-text">二维码生成</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-tool="string">
                        <span class="nav-icon">🔗</span>
                        <span class="nav-text">文本筛选</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-tool="sql">
                        <span class="nav-icon">🗄️</span>
                        <span class="nav-text">SQL工具</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-tool="json">
                        <span class="nav-icon">📄</span>
                        <span class="nav-text">JSON工具</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="main-content" id="main-content">
            <!-- 内容将通过JavaScript动态加载 -->
        </main>
    </div>

    <!-- 工具对应的脚本文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="js/qrcode-tool.js?v=" + new Date().getTime()></script>
    <script src="js/string-tool.js?v=" + new Date().getTime()></script>
    <script src="js/sql-tool.js?v=" + new Date().getTime()></script>
    <script src="js/json-tool.js?v=" + new Date().getTime()></script>
    <script src="js/app.js?v=" + new Date().getTime()></script>

</body>
</html>